<template>

  <!--  风险点调查表单-->
  <div class="page_monitor-add">
    <!-- 页面title -->
    <div class="page-title">公路地质灾害隐患排查表单填写</div>
    <el-form
      ref="form"
      :rules="rules"
      label-position="right"
      :model="currentRow"
      label-suffix="："
      label-width="160px">
      <el-card class="paicha_view">
        <div
          v-if="stepActive === 1"
          style="text-align: center; margin-top: 5%; padding: 20px">
          <el-divider><span style="font-size: 25px; color:#1990FE">选择灾害类型</span></el-divider>
          <el-row :gutter="10">
            <el-col :span="8" v-for="item in damageTypeList" :key="item.code">
              <el-card
                class="hiddenDangerFormCard"
                shadow="hover"
                @click.native="changeDamageType(item)"
                :class="damageType == item.code ? 'select_card' : 'hover_card'">
                <img v-if="item.name === '崩塌'" src='~@/assets/images/jg_zh_bt.png'>
                <img v-else-if="item.name === '滑坡'" src='~@/assets/images/jg_zh_hp.png'>
                <img v-else-if="item.name === '泥石流'" src='~@/assets/images/jg_zh_nsl.png'>
                <img v-else-if="item.name === '沉陷与塌陷'" src='~@/assets/images/jg_zh_cx.png'>
                <img v-else-if="item.name === '水毁'" src='~@/assets/images/jg_zh_sh.png'>
                <span class="zh_name_view">{{ item.name }}</span>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <div v-if="stepActive === 2">
          <el-divider><span style="font-size: 25px; color: #1990FE;">{{ damageTypeName }}风险点信息调查表</span></el-divider>
          <el-form-item label="管养单位" prop="deptTreeId" style="margin-top: 20px">
            <organization
              v-model="currentRow.deptTreeId"
              placeholder="选择管养单位"
              @change="changeDept"
            ></organization>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="路线" prop="roadId">
                <el-select
                  :popper-append-to-body="false"
                  v-model="currentRow.roadId"
                  clearable
                  filterable
                  placeholder="选择路线"
                  @change="changeRoad">
                  <el-option
                    v-for="item in roadSelectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="灾害点" prop="damageId">
                <el-select

                  :popper-append-to-body="false"
                  v-model="currentRow.damageId"
                  filterable
                  clearable
                  placeholder="选择灾害点">
                  <el-option
                    v-for="item in damageSelectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-tabs v-model="activeName">
            <el-tab-pane
              v-for="item in template"
              :key="item.id"
              :label="item.name"
              :name="item.name">
              <div v-for="child1 in item.childList" :key="child1.id">
                <div v-if="child1.level === 1">
                  <div v-if="child1.mathTypeName === '单选'">
                    <el-form-item :label="child1.name">
                      <el-radio-group size="small" v-model="child1.value">
                        <el-radio-button
                          v-for="child2 in child1.childList"
                          :key="child2.code"
                          :label="child2.code">
                          {{ child2.name }}
                        </el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </div>
                  <div v-if="child1.mathTypeName === '多选'">
                    <el-form-item :label="child1.name">
                      <el-checkbox-group
                        size="small"
                        v-model="child1.valueList">
                        <el-checkbox-button
                          v-for="child2 in child1.childList"
                          :key="child2.code"
                          :label="child2.code">
                          {{ child2.name }}
                        </el-checkbox-button>
                      </el-checkbox-group>
                    </el-form-item>
                    <el-form-item
                      label="其他"
                      v-if="
                          child1.hasOther === 1 &&
                          child1.valueList &&
                          child1.valueList.indexOf(child1.childList.length) !==-1">
                      <el-input
                        v-model="child1.other"
                        clearable
                        placeholder="请描述其他"
                        style="width: 40%"
                      ></el-input>
                    </el-form-item>
                  </div>
                  <div v-if="child1.mathTypeName === '填写'">
                    <el-form-item
                      :label="child1.name"
                      prop="longitude"
                      v-if="child1.inputTypeName === '日期'">
                      <el-date-picker
                        style="width: 40%"
                        v-model="child1.value"
                        value-format="timestamp"
                        type="date"
                        placeholder="选择日期">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item :label="child1.name" prop="longitude" v-else>
                      <el-input
                        v-model.trim="child1.value"
                        placeholder="请输入"
                        :type="child1.inputTypeName === '数字' ? 'number' : ''"
                        style="width: 40%">
                      </el-input>
                    </el-form-item>
                  </div>
                </div>
                <div v-else>
                  <el-divider content-position="left"><span
                    style="font-size: 15px; color: #1990FE">{{child1.name}}</span></el-divider>
                  <div v-for="child2 in child1.childList" :key="child2.id">
                    <div v-if="child2.mathTypeName === '单选'">
                      <el-form-item :label="child2.name">
                        <el-radio-group size="small" v-model="child2.value">
                          <el-radio-button
                            v-for="child3 in child2.childList"
                            :key="child3.code"
                            :label="child3.code">
                            {{ child3.name }}
                          </el-radio-button>
                        </el-radio-group>
                      </el-form-item>
                    </div>
                    <div v-if="child2.mathTypeName === '多选'">
                      <el-form-item :label="child2.name">
                        <el-checkbox-group
                          size="small"
                          v-model="child2.valueList">
                          <el-checkbox-button
                            v-for="child3 in child2.childList"
                            :key="child3.code"
                            :label="child3.code">
                            {{ child3.name }}
                          </el-checkbox-button>
                        </el-checkbox-group>
                      </el-form-item>
                      <el-form-item
                        label="其他"
                        v-if="
                          child2.hasOther === 1 &&
                          child2.valueList &&
                          child2.valueList.indexOf(child2.childList.length) !==-1">
                        <el-input
                          v-model="child2.other"
                          clearable
                          placeholder="请描述其他"
                          style="width: 40%"
                        ></el-input>
                      </el-form-item>
                    </div>

                    <div v-if="child2.mathTypeName === '不计分'">
                      <el-divider content-position="left"
                      ><span style="font-size: 15px; color: #1990FE">{{child2.name}}</span></el-divider>
                      <div v-for="child3 in child2.childList" :key="child3.id">
                        <div v-if="child3.mathTypeName === '多选'">
                          <el-form-item :label="child3.name">
                            <el-checkbox-group
                              size="small"
                              v-model="child3.valueList">
                              <el-checkbox-button
                                v-for="child4 in child3.childList"
                                :key="child4.code"
                                :label="child4.code"
                              >{{ child4.name }}
                              </el-checkbox-button>
                            </el-checkbox-group>
                          </el-form-item>
                          <el-form-item
                            label="其他"
                            v-if="
                              child3.hasOther === 1 &&
                              child3.valueList &&
                              child3.valueList.indexOf(child3.childList.length) !== -1">
                            <el-input
                              v-model="child3.other"
                              clearable
                              placeholder="请描述其他"
                              style="width: 40%"
                            ></el-input>
                          </el-form-item>
                        </div>
                        <div v-if="child3.mathTypeName === '填写'">
                          <el-form-item :label="child3.name" prop="longitude">
                            <el-input
                              v-model.trim="child3.value"
                              placeholder="请输入"
                              :type="child3.inputTypeName === '数字' ? 'number' : ''" style="width: 40%">
                            </el-input>
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="特征描述和照片" name="img">
              <el-form-item label="隐患点特征描述" prop="longitude">
                <el-input
                  v-model.trim="currentRow.explanation"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 6 }"
                  placeholder="主要从灾害历史特征、隐患点现状特征及对公路可能造成的危害进行描述"
                  style="width: 40%">
                </el-input>
              </el-form-item>
              <el-divider content-position="left">
                平面图或全貌照片（反映特征及范围，与危害对象关系），剖面图或局部照片。
              </el-divider>
              <el-form-item label="图片" prop="picList">
                <upload-img
                  v-model="currentRow.picList"
                  :limit="6"
                  :size-limit="6"
                  ref="uploadPic"
                ></upload-img>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
    </el-form>
    <div class="demo-drawer__footer">
      <el-button type="primary" v-if="stepActive === 2" @click="stepActive--">上一步</el-button>
      <el-button type="primary" v-if="stepActive === 1 && damageType" @click="lastStep">下一步
      </el-button>
      <!--        <el-button class="common_btn-defalut" type="primary" v-if="stepActive === 2" @click="validatorForm">提交记录-->
      <!--        </el-button>-->
    </div>
  </div>
</template>

<script>
  import {getTemplateContent, putDamageForm} from "@/services/model/form";
  import ItemMixins from "../item.mixins";
  import UploadImg from "@/components/upload-img";
  import Organization from "@/components/organization-unit/all";
  import Enums from '@/utils/enums'

  export default {
    components: {UploadImg, Organization},
    mixins: [ItemMixins,Enums],
    data() {
      return {
        rules: {
          deptTreeId: {required: true, message: "请选择管养单位"},
          roadId: {required: true, message: "请选择路线"},
          damageId: {required: true, message: "请选择灾害点"},
        },
        activeName: "坡体特征",
        currentRow: {},
        template: [],
        damageTypeList: [],
        stepActive: 1,
        damageType: "",
      };
    },
    watch: {
      jumpCurrentRow(val) {
        this.currentRow = this.baseCurrentRow;
        if (val) {
          this.currentRow = val;
        }
      },
    },
    computed: {
      jumpCurrentRow() {
        return this.$route.params.currentRow;
      },
    },
    methods: {
      headAdd(){
        this.currentRow={}
        this.stepActive=1
        this.damageType=''
        this.damageTypeName=''
      },
      changeDamageType(item) {
        this.damageType = item.code;
        this.damageTypeName = item.name;
        this.getTemplate();
      },
      async getTemplate() {
        let res = await getTemplateContent({formType: this.damageType});
        this.template = res.data;
      },
      lastStep() {
        if (this.damageTypeName !== "崩塌" || this.damageTypeName !== "滑坡") {
          this.activeName = "灾害历史特征";
        } else {
          this.activeName = "坡体特征";
        }
        this.currentRow = {damageType: this.damageType};
        this.stepActive++;
      },
      // 新增编辑提交数据
      async submitData() {
        this.$emit("disableds",true)
        this.currentRow.formJson = JSON.stringify(this.template);
        try {
         let res= await putDamageForm(this.currentRow);
          this.$emit("disableds",false)
          if (res.code === 200) {
            this.damageType = "";
            this.currentRow = {};
            this.stepActive = 1;
            this.$notify({
              type: "success",
              title: "提示",
              message: "添加成功",
            });
            this.$emit("submitClose");
          }
        } catch (error) {
          this.$emit("disableds",false)
          this.isLoading = false
        }
      },
      // 表单校验
      validatorForm() {
        return new Promise((resolve) => {
          this.$refs.form.validate((valid) => {
            if (valid && resolve) {

              this.submitData();


            }
          });
        });
      },
      //获取路线列表
      async changeDept() {
        let list = await this.getRoadListByDept(this.currentRow.deptTreeId);
        if (list.length > 0) {
          this.$set(this.currentRow, "roadId", list[0].id);
          this.changeRoad()
        } else {
          this.$set(this.currentRow, "roadId", "");
          this.$set(this.currentRow, "slopeId", "");
        }
      },
      //查询灾害点列表
      async changeRoad() {
        this.damageSelectList = [];
        const {roadId, deptTreeId, damageType} = this.currentRow;
        let list = await this.getDamageSelectList(deptTreeId, roadId, damageType)
        if (list.length > 0) {
          this.$set(this.currentRow, "damageId", list[0].id);
        } else {
          this.$set(this.currentRow, "damageId", "");
        }
      },
    },
    created() {
    },
    mounted() {
      // 启用状态枚举
      this.queryDictList(["EnumDamageType"], ["damageTypeList"]);
      // // 查询单位类型
    },
    activated() {
    },
  };
</script>
<style lang="less" scoped>
  .hover_card {
    height: 100px;
    line-height: 90px;
    font-size: 20px;
    margin-top: 10px;
  }

  .select_card {
    height: 100px;
    line-height: 90px;
    font-size: 20px;
    margin-top: 10px;
    background-color: #1990FE;
    color: #000000;
  }
  .page_monitor-add {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding-right: 6%;
    .demo-drawer__footer {
      text-align: center;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-button {
        background: #1990FE;
        border: none;
      }
    }

    .page-title {
      margin-bottom: 20px;
      padding: 28px;
      font-size: 30px;
      width: 100% !important;
      line-height: 18px;
      text-align: center;
      color: #1990FE;
      font-weight: 600;
      border-radius: 20px;
      box-sizing: border-box;
      /*background: #1990FE !important;*/
      box-shadow: 0px 0px 4px #161616;
      /*border: 1px solid #161616;*/
      margin-top: 10px;
    }

    /deep/ .el-tabs__item.is-active {
      font-size: 20px;
      border-radius: 5px;
      font-weight: 600;
    }

    /deep/ .el-tabs__item {
      font-size: 20px;
    }
  }

  .form_box {
    padding: 20px;
  }

  .s-white {
    color: #ffffff;
  }

  .el-steps--simple {
    margin-bottom: 20px;
  }


  .paicha_view {
    height: 73vh;
    overflow: auto;
    padding-top: 20px;
    /*background: #1b1b1b !important;*/

    .el-tabs {
      padding-left: 40px;

      .el-tabs__active-bar {
        background: #1990FE;

      }

      .el-tabs__item {
        color: white;
      }

      .is-active {
        color: #1990FE;
      }

      .el-radio-button {
        span:hover {
          color: white;
          background: #1990FE;


        }
      }
    }


    .el-input--suffix .el-input__inner {
      // background: #1990FE !important;
      color: #1990FE;
    }

    .el-card {
      box-shadow: 0px 0px 8px #757575;
      background: #ffffff;
      color: #1990FE;
      box-shadow: none;
      // font-size: 140%;
    }
  }

  .select_card {
    background: #29597f !important;
    font-size: 200%;
    font-weight: 600;
    color: white !important;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 2px #6d6d6d !important;
  }

  /deep/ .hiddenDangerFormCard {
    /*background: rgb(40, 51, 64) !important;*/
  }

  /*鼠标悬浮效果*/
  .hover_card:hover {
    background: #29597f !important;
    font-size: 210%;
    color: white !important;
    font-weight: 600;
  }

  // 设置 fromlabel 文字颜色


  // 设置单选框选中颜色
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background: #1990FE;
    border-color: #1990FE;
  }

  .paicha_view .el-card {
    border: 1px solid #1990FE !important;
  }

  span {
    // color: white !important;
  }

  .el-form-item__label {
    // color: white !important

  }

  .zh_name_view {
    display: inline-block;
    margin-left: 15px;
  }
</style>
